<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分层和排序</title>
		<style type="text/css">
		/* 注释内容 */
		.grid-container{
			display: grid;
			grid-template-columns: repeat(10, 1fr);
			grid-template-rows: repeat(10, 1fr);
			background-color: #FFC0CB;
		}
		.grid-container > div {
			background-color: aqua;
			text-align: center;
			padding: 10px;
			border: white 2px solid;
		}
		.one{
			grid-area: 2/4/6/10;
			z-index: 1;
		}
		.two{
			grid-area:1/1/8/6;
			order: 1;
		}
		.three{
			grid-area: 5/2/10/5;
		}
		.four{
			grid-area: 6 / 4 / 9 / 9;
		}
		.five{
			grid-area:5/8/11/11;
		}
		
		</style>
	</head>
	<body>
		<!-- z-index提升高度 order改变顺序 -->
		<div class="grid-container">
			<div class="one">1</div>
			<div class="two">2</div>
			<div class="three">3</div>
			<div class="four">4</div>
			<div class="five">5</div>
		</div>
		
	</body>
</html>
